#section {
    /* width: 1200px; */
    height: 10.52rem;
    background: #010E1E;

    /* position: relative; */

}

#section .line {
    width: 0.6rem;
    height: 0.06rem;
    background: #EC6941;
    border-radius: 0.03rem;
    margin-left: 9.3rem;
    top: 0.94rem;
    position: relative;
}

#outBox {
    margin-bottom: 1.38rem;
}

.title {
    width: 1.04rem;
    height: 0.25rem;
    font-size: 0.26rem;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 0.56rem;
    margin-left: 9.09rem;
    top: 1.25rem;
    position: relative;
}

#introduce {
    width: 6.56rem;
    height: 0.16rem;
    font-size: 0.16rem;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FFFFFF;
    margin-left: 50%;
    transform: translateX(-50%);
    line-height: 0.56rem;
    /* margin-left: 6.31rem; */
    text-align: center;
    top: 1.74rem;
    /* position: relative; */
}

#outBox img {
    width: 3.26rem;
    height: 4.28rem;
    margin-left: 3.6rem;
    top: 2.87rem;
    position: relative;
}

#indexBox {
    margin-left: 7.32rem;
    /* width: 8.33rem; */
    margin-top: -1.42rem;
}

#indexBox .uptitle {
    width: 8.33rem;
    height: 0.6rem;
    background: #6C6CE5;
    border-radius: 0.1rem;
    /* margin-left: 0.41rem; */
    margin-bottom: 0.30rem;
}

#indexBox .uptitle h1 {
    width: 1.37rem;
    height: 0.17rem;
    font-size: 0.18rem;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 0.15rem;
    margin-left: 3.32rem;
    top: .22rem;
    position: relative;
}

#titleBox .box {
    width: 3.96rem;
    height: 0.6rem;
    border: 1px solid #626262;
    border-radius: 0.1rem;
    margin-bottom: 0.30rem;
    margin-right: 0.4rem;
}

#titleBox {
    display: flex;
    flex-wrap: wrap;
}

#indexBox .box h1 {
    width: 2.5rem;
    height: 0.17rem;
    font-size: 0.18rem;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 0.15rem;
    margin-left: 0.4rem;
    margin-top: 0.22rem;
}


/* body */
#body {
    height: 6.08rem;
    background: #151F2B;
    /* margin-top: 1.36rem; */
}

.introduce {
    width: 6.56rem;
    height: 0.16rem;
    font-size: 0.16rem;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 0.56rem;
    margin-left: 7.07rem;
    top: 1.74rem;
    position: relative;
}

#progress-bar {
    display: flex;
    flex-wrap: wrap;
    width: 14rem;
    margin-top: 2.82rem;
    margin-left: 3.6rem;
}

#progress-bar .bar {
    width: 5.6rem;
    height: 1rem;
    margin-right: 0.8rem;
    position: relative;
    /* margin-bottom: 0.94rem; */
    /* height: 1rem; */
}

#progress-bar .progress {
    width: 5.56rem;
    height: 0.14rem;
    background: #FFFFFF;
    border: 1px solid #FFFFFF;
    border-radius: 0.07rem;
}

#progress-bar p {
    width: 0.46rem;
    height: 0.15rem;
    font-size: 0.18rem;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 0.56rem;
    margin-bottom: 0.4rem;
}

#progress-bar .htmlcolor {
    /* width: 5.64rem; */
    width: 0%;
    height: 0.18rem;
    border-radius: 0.07rem;
    position: absolute;
    top: 0.54rem;
    margin-left: -0.005rem;
    background: #FF2558;
}


#progress-bar .phpcolor {
    /* width: 4.48rem; */
    width: 0%;
    height: 0.17rem;
    border-radius: 0.07rem;
    position: absolute;
    top: 0.55rem;
    margin-left: -0.005rem;
    background: #13B5B1;

}

#progress-bar .csscolor {
    /* width: 3.36rem; */
    width: 0%;
    height: 0.17rem;
    border-radius: 0.07rem;
    position: absolute;
    top: 0.55rem;
    margin-left: -0.005rem;
    background: #00A0E9;
}

#progress-bar .cmscolor {
    /* width: 2.8rem; */
    width: 0%;
    height: 0.17rem;
    border-radius: 0.07rem;
    position: absolute;
    top: 0.55rem;
    margin-left: -0.005rem;
    background: #F39800;
}

#progress-bar .javacolor {
    /* width: 4.48rem; */
    width: 0%;
    height: 0.17rem;
    border-radius: 0.07rem;
    position: absolute;
    top: 0.55rem;
    margin-left: -0.005rem;
    background: #C490BF;
}

#progress-bar .photocolor {
    /* width: 3.92rem; */
    width: 0%;
    height: 0.17rem;
    border-radius: 0.07rem;
    position: absolute;
    top: 0.55rem;
    margin-left: -0.005rem;
    background: #25FFA0;
}

#progress-bar img {
    width: 0.43rem;
    height: 0.36rem;
    position: absolute;
    top: 0.2rem;
    right: 0rem;
}

#progress-bar h1 {
    position: absolute;
    top: 0.05rem;
    right: 0.05rem;
    width: 0.35rem;
    height: 0.12rem;
    font-size: 0.14rem;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 0.56rem;
}

#progress-bar h2 {
    position: absolute;
    top: 0.05rem;
    right: 0.01rem;
    width: 0.35rem;
    height: 0.12rem;
    font-size: 0.14rem;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 0.56rem;
}

/* foot */
/* first */
#foot {
    height: 24.21rem;
    background: #010E1E;
    margin-top: 0.94rem;
}

#first {
    height: 7.08rem;
    background: #010E1E;
    position: relative;
    /* background: #25FFA0; */
    /* padding-left: 6.49rem; */
}

h {
    width: 1.12rem;
    height: 0.25rem;
    font-size: 0.26rem;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 0.56rem;
    margin-left: 3.59rem;
    position: absolute;
    top: 0.94rem;
}

.outline p {
    width: 0.18rem;
    height: 0.18rem;
    /* background: #FF9B2F; */
    border-radius: 50%;
    left: 3.72rem;
}

/* color */
#first .outline .down {
    background: #6C6CE5;
}

#first .outline .up {
    background: #FF9B2F;
}

#second .outline .down {
    background: #F97B8B;
}

#second .outline .up {
    background: #1275F0;
}

#third .outline .down {
    background: #65CDFF;
}

#third .outline .up {
    background: #54D891;
}

.outline .up {
    position: absolute;
    top: 2.4rem;
}

.outline .down {
    position: absolute;
    top: 5.02rem;
}

.outline .vertical {
    width: 0.06rem;
    height: 2.6rem;
    background: #151F2B;
    position: absolute;
    top: 2.51rem;
    left: 3.78rem;
}

.border {
    width: 11.58rem;
    height: 2.34rem;
    background: #151F2B;
    border-radius: 0.1rem;
    margin-left: 4.02rem;
    margin-bottom: 0.28rem;
    display: flex;
}

.up-title {
    position: absolute;
    top: 2.12rem;
}

.down-title {
    position: absolute;
    top: 4.74rem;
}

.left-box {
    width: 2.07rem;
    height: 2.34rem;
    border-radius: 0.1rem;
}

.on {
    background: #FF9B2F;
}

.index {
    background: #6C6CE5;
}

.border .left-box p {
    width: 1.60rem;
    height: 0.2rem;
    font-size: 0.2rem;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 0.15rem;
    text-align: center;
    margin-left: 0.24rem;
}

.left-box .upon {
    margin-top: 0.88rem;
}

.left-box .updown {
    margin-top: 0.19rem;
}

.content .onup {
    width: 3.08rem;
    height: 0.52rem;
    background: #010E1E;
    border-radius: 0.1rem;
    margin-left: 0.4rem;
    margin-top: 0.47rem;
    text-align: center;
    display: flex;
    margin-bottom: 0.27rem;
}

.content p {
    width: 1.85rem;
    height: 0.18rem;
    font-size: 0.18rem;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 0.56rem;
    margin-left: 0.21rem;
    /* margin-top: 0.16rem; */
}

.content h2 {
    width: 0.89rem;
    height: 0.16rem;
    font-size: 0.16rem;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FF9B2F;
    line-height: 0.56rem;
    position: absolute;
    margin-left: 2.09rem;
}

.content .down-content {
    width: 8.44rem;
    height: 0.39rem;
    font-size: 0.14rem;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 0.24rem;
    margin-left: 0.42rem;
}

/* second */
#foot #second {
    position: absolute;
    height: 8.22rem;
    width: 100%;
    /* background: #00A0E9; */
    /* margin-top: 8.02em; */

}

#second {
    /* position: absolute; */
}

#second h {
    width: 1.12rem;
    height: 0.25rem;
    font-size: 0.26rem;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 0.56rem;
    margin-left: 3.59rem;
    position: absolute;
    top: 0.94rem;
}

#second .outline p {
    width: 0.18rem;
    height: 0.18rem;
    background: #FF9B2F;
    border-radius: 50%;
    left: 3.72rem;
}

#second .outline .up {
    position: absolute;
    top: 2.41rem;
}

#second .outline .down {
    position: absolute;
    top: 5.69rem;
}

#second .outline .vertical {
    width: 0.06rem;
    height: 3.21rem;
    background: #151F2B;
    position: absolute;
    top: 2.51rem;
    left: 3.78rem;
}

#second .border {
    width: 11.58rem;
    height: 2.8rem;
    background: #151F2B;
    border-radius: 0.1rem;
    margin-left: 4.02rem;
    margin-bottom: 0.28rem;
    display: flex;
}

#second .up-title {
    position: absolute;
    top: 2.13rem;
}

#second .down-title {
    position: absolute;
    top: 5.41rem;
}

#second .left-box {
    width: 2.07rem;
    height: 2.8rem;
    background: #1275F0;
    border-radius: 0.1rem;
}

#second .down-title {
    height: 2.81rem;
}

#second .on {
    background: #1275F0;
}

#second .index {
    background: #F97B8B;
}

#second .border .left-box p {
    width: 2.07rem;
    height: 0.2rem;
    font-size: 0.2rem;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 0.15rem;
    text-align: center;
    margin-left: 0rem;
}

#second .left-box .upon {
    margin-top: 1.07rem;
}

#second .left-box .updown {
    margin-top: 0.19rem;
}

#second .content .onup {
    width: 3.21rem;
    height: 0.52rem;
    background: #010E1E;
    border-radius: 0.1rem;
    margin-left: 0.4rem;
    margin-top: 0.47rem;
    text-align: center;
    display: flex;
    margin-bottom: 0.27rem;
}

#second .content .ondown {
    width: 2.14rem;
    height: 0.52rem;
    background: #010E1E;
    border-radius: 0.1rem;
}

#second .content h2 {
    width: 1.17rem;
    height: 0.16rem;
    font-size: 0.16rem;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #1275F0;
    line-height: 0.56rem;
    position: absolute;
    margin-left: 1.84rem;
}

#second .content .ondown h2 {
    width: 1.17rem;
    height: 0.16rem;
    font-size: 0.16rem;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #F97B8B;
    line-height: 0.56rem;
    margin-left: 0.77rem;
}

#second .content .down-content {
    width: 9.3rem;
    height: 1.11rem;
    font-size: 0.14rem;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 0.24rem;
    margin-left: .4rem;
    /* overflow: hidden; */
}

#second .up-title .content p {
    width: 1.52rem;
    height: 0.18rem;
    font-size: 0.18rem;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 0.56rem;
    position: absolute;
    margin-left: 0.21rem;
}

#second .down-title .content p {
    width: 0.45rem;
    height: 0.18rem;
    font-size: 0.18rem;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 0.56rem;
    margin-left: 0.21rem;
}


/* third */
#third {
    width: 100%;
    height: 7.08rem;
    /* background: #C490BF; */
    position: absolute;
    margin-top: 8.22rem;
}

#third .border .left-box p {
    margin-top: 1.07rem;
    margin-left: 0.24rem;
}

#third .on {
    background: #54D891;
}

#third .index {
    background: #65CDFF;
}

#third .onup {
    width: 1.4rem;
}
#third .onup .p{
    margin-left: 0;
}
#third .ondown {
    width: 4.7rem;
}
#third .ondown p{
    width: 2rem;
}
#third .ondown h2 {
    width: 1.88rem;
    height: 0.18rem;
    font-size: 0.16rem;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #65CDFF;
    line-height: 0.56rem;
    margin-left: 2.5rem;
}

/* foot */
#footer {
    height: 0.96rem;
    background: #151F2B;
}

#footer .foot {
    padding-top: 0.41rem;
    font-size: 0.14rem;
    font-weight: 400;
    color: #FFFFFF;
    margin-left: 8.34rem;
}

/* end */


